<style scoped>
    .print-PO-page{max-width:780px;margin:0 auto;}
</style>
<template>
    <div class="print-PO-page">
        <div class="handle-box">
            <!--打印界面预览-->
            <label>
                Print interface Preview：</label>
            <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="createPdf">print</el-button>
            <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="backSeePO">back</el-button>
        </div>
        <div id="pdf-wrap" style="padding:0px;max-width:780px;margin:0 auto;">
            <div id='content' style="position:relative;padding:0px;max-width:780px;margin:0 auto;">
            <div class="print_img"><img style="height: 36px;" src="../../images/lenovo_black.jpg"><span style="font-size: 18px;font-style: italic;display: inline-block;margin-top: 11px;margin-left: 4px;color:black; vertical-align: top;">联想</span></div>
            <div class="" style="font-size: 12px;color:black;">
                <div style="margin-bottom: 0px;padding-bottom: 0px;font-size: 12px;line-height: 16px;">Lenovo(Beijing) Limited.</div>
                <div style="margin-bottom: 0px;padding-bottom: 10px;font-size: 12px;line-height: 16px;">Address: No.6, Chuangye Road, Shangdi Information industry Base,Haidian District, Beijing ,China</div>
            </div>
            <div class="" style="font-size: 12px;border:1px solid black;line-height: 18px;padding: 5px;color:black;">
                <div style="margin-bottom: 0px;padding-bottom: 0px;line-height: 16px;">
                    1. Lenovo Standard Purchase Order Terms and Conditions are incorporated by reference. They may be obtained via {{absUrl}}
                </div>
                <div style="margin-bottom: 0px;padding-bottom: 0px;line-height: 16px;">
                    2. Every invoice and packing list must clearly indicate: Order Number,Line Item, Supplier Number, Lenovo Number, Quantity, Country of Origin.Contract Number
                </div>
                <div style="margin-bottom: 0px;padding-bottom: 0px;line-height: 16px;">
                    3. It is deemed that you have read and accepted the terms and conditions on the website indicated in the PO by 1)signing and returning the PO to us;or 2) shipping or preparing to ship the goods or making the services available to us, provided that you inform us in writing you are not able to access the above said website or you are able to access the above said website but you do not accept the terms and conditions on the above said website before you make any of the actions stated above.
                </div>
                <div style="margin-bottom: 0px;padding-bottom: 0px;font-size: 12px;line-height: 16px;">
                    4. Attach a copy of the packing list to each shipment.
                </div>
                <div style="margin-bottom: 0px;padding-bottom: 40px;font-size: 12px;line-height: 16px;">
                    5. Supplier shall not include any explosives,hazardous, materials,incendiarics and/or destructive devices in any products or parts shipped under this Purchase Order.
                </div>
            </div>
            <div id="pdf-content">

                <h1 class="title" style="font-size:18px;text-align:center;color:black;padding-top: 5px;">Purchase Order</h1>
                <div :model="seePOForm" style="border-bottom:1px solid #000;font-size:0px;line-height: 20px; margin-top: 10px;padding-bottom:10px;" class="from-div">
                    <ul class="left-ul" style="padding:0;margin:0;font-size:12px;display:inline-block;list-style: none;width: 50%;color:black;    vertical-align: top;">
                        <li style="">
                            <label style="font-size: 12px;">TO:</label>
                            <div class="item-value" style="padding:0 5px;font-size:12px;min-width:200px;display:inline-block;">{{seePOForm.creatorName}} </div>
                        </li>
                        <li style="">
                            <!--地  址：-->
                            <label style="font-size: 12px;">Supplier Address:</label>
                            <div class="item-value" style="padding:0 5px;min-width:200px;display:inline-block;font-size:12px;"> No.6, Chuangye Road, Shangdi Information industry Base,Haidian District, Beijing ,China</div> <!-- {{seePOForm.address}} -->
                        </li>
                        <li style="">
                            <!--邮  编：-->
                            <label style="font-size: 12px;">Supplier Number:</label>
                            <div class="item-value" style="padding:0 5px;min-width:200px;display:inline-block;font-size:12px;">000001</div>  <!-- {{seePOForm.address}} -->
                        </li>
                        <li style="" >
                           <!-- 联系人：-->
                            <label style="font-size: 12px;">Supplier Contact:</label>
                            <div class="item-value" style="padding:0 5px;min-width:200px;display:inline-block;font-size:12px;">Tom</div>    <!-- {{seePOForm.contacts}} -->
                        </li>
                        <li style="">
                            <!--电  话：-->
                            <label style="font-size: 12px;">Tel No. :</label>
                            <div class="item-value" style="padding:0 5px;min-width:200px;display:inline-block;font-size:12px;">12345789900</div>   <!-- {{seePOForm.telephone}} -->
                        </li>
                        <li style="">
                            <!--传  真：-->
                            <label style="font-size: 12px;">Fax No. :</label>
                            <div class="item-value" style="padding:0 5px;min-width:200px;display:inline-block;font-size:12px;">020202020</div> <!-- {{seePOForm.fax}} -->
                        </li>

                        <li style="">
                            <!--抄送：-->
                            <label style="font-size: 12px;">Contract No. :</label>
                            <div class="item-value" style="padding:0 5px;min-width:200px;display:inline-block;font-size:12px;">22222</div>  <!-- {{seePOForm.contacts}} -->
                        </li>
                    </ul>
                    <ul class="right-ul" style="padding:0;margin:0 0 0 0px;width:50%;display:inline-block;list-style: none;font-size:12px;color:black;">
                        <li style="">
                            <label style="width:66px;font-size: 12px;">From：</label>
                            <div class="item-value" style="padding:0 5px;min-width:100px;display:inline-block;">{{seePOForm.creatorName}}</div> <!--  -->
                        </li>
                        <li style="">
                            <label style="width:66px;font-size: 12px;">Tel No. :</label>
                            <div class="item-value" style="padding:0 5px;min-width:100px;height:22px;line-height:22px;display:inline-block;"></div> <!-- {{seePOForm.creatorName}} -->
                        </li>
                        <li style="">
                            <label style="width:66px;font-size: 12px;">Fax No. :</label>
                            <div class="item-value" style="padding:0 5px;min-width:100px;display:inline-block;"></div> <!-- {{seePOForm.creatorName}} -->
                        </li>
                        <li style="">
                            <label style="width:66px;font-size: 12px;">Eamil :</label>
                            <div class="item-value" style="padding:0 5px;min-width:100px;display:inline-block;">ZHENGGENGI@LENOVO.COM</div> <!-- {{seePOForm.creatorName}} -->
                        </li>
                        <div style="height: 16px;"></div>
                        <li style="">
                            <label style="width:66px;font-size: 12px;">PO NO. :</label>
                            <div class="item-value" style="padding:0 5px;min-width:100px;display:inline-block;">{{seePOForm.prOrderCode}}</div>
                        </li>
                        <li style="">
                            <label style="width:66px;font-size: 12px;">Date ：</label>
                            <!--08/22/2017-->
                            <div class="item-value" style="padding:0 5px;min-width:100px;display:inline-block;">{{formatDate(seePOForm.createTime)}}</div> <!-- {{seePOForm.createTime}} -->
                        </li>
                        <li style="">
                            <label style="width:66px;vertical-align: top;font-size: 12px;">Plant ：</label>
                            <div class="item-value" style="padding:0 5px;min-width:100px;display:inline-block;font-size: 12px;">
                                {{seePOForm.legalPersonCode}}<br/>{{seePOForm.legalPersonName}}
                            </div> <!-- {{seePOForm.fax}} -->
                        </li>
                  <!--      <p class="p-style" style="margin: 0; padding: 0;height:75px;">第一个工厂</p>-->
                    </ul>
                    <div class="width-100" style="position:relative;width:100%;line-height:20px;height: 20px;">
                        <div style="position:absolute;right:0;margin: 0;width:100px;padding: 0;display:inline-block;font-size:12px;font-style:normal;">Currency：RMB</div><!--{{seePOForm.currency.label}}-->
                    </div>
                </div>
                <div class="order-date" style="position:relative;">
                    <div class="table-head" style="padding:0;margin:0;border-bottom:1px solid #000;list-style: none;font-size:12px;">
                        <div style="margin:0;padding:0;list-style: none;">
                            <div class="table-head-item" style="width:36px;word-wrap: break-word;text-align:left;line-height:26px;display:inline-block;font-size:12px;">Item</div>
                            <div class="table-head-item marginleft20" style="margin-left:24px;padding:0 2px;width:138px;word-wrap: break-word;text-align:left;line-height:26px;font-size:12px;display:inline-block;">Material</div><!--物料编码-->
                            <div class="table-head-item" style="padding:0 2px;width:66px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;font-size:12px;">Quanitity</div>
                            <div class="table-head-item" style="padding:0;width:36px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;font-size:12px;">Uom</div><!--单位-->
                            <div class="table-head-item" style="padding:0;width:86px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;font-size:12px;">Unit price/Per</div>
                            <div class="table-head-item" style="padding:0 2px;width:86px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;font-size:12px;">Amount</div>
                            <div class="table-head-item" style="padding:0;width:36px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;font-size:12px;">Tax</div>
                            <div class="table-head-item" style="padding:0 2px;width:66px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;font-size:12px;">Loc</div>
                        </div>
                        <div style="margin:0;padding:0;list-style: none;">
                            <div class="table-head-item top20" style="width:20%;box-sizing:border-box;word-wrap: break-word;text-align:left;line-height:26px;display:inline-block;">Delivery date</div>
                            <div class="table-head-item top20" style="padding-left:22px;width:78%;box-sizing:border-box;word-wrap: break-word;text-align:left;line-height:26px;display:inline-block;">Description</div>

                        </div>
                    </div>
                    <div class="table-content" :id="'table-content'+index" v-for="(firstTable,index) in procurementDetailsData" :key="index" style="position:relative;height:46px;padding:0;margin:0;border-bottom:1px solid #000;list-style: none;font-size:12px;">
                        <div style="margin:0;padding:0;list-style: none;">
                            <div class="table-content-item" style="width:36px;word-wrap: break-word;text-align:left;line-height:22px;display:inline-block;">{{index + 1}}</div>
                            <div class="table-content-item marginleft20" :title="firstTable.materialCode" style="margin-left:24px;padding:0 2px;width:138px;word-wrap: break-word;text-align:left;line-height:22px;display:inline-block;font-size:12px;">{{firstTable.materialCode}}</div>
                            <div class="table-content-item" :title="firstTable.amount" style="padding:0 2px;width:66px;word-wrap: break-word;text-align:center;line-height:22px;display:inline-block;font-size:12px;">{{firstTable.amount}}</div>
                            <div class="table-content-item" :title="firstTable.unit" style="padding:0;width:36px;word-wrap: break-word;text-align:center;line-height:22px;display:inline-block;font-size:12px;">{{firstTable.unit}}</div>

                            <div class="table-content-item" :title="firstTable.priceNoTax" style="padding:0;width:86px;word-wrap: break-word;text-align:right;line-height:22px;display:inline-block;font-size:12px;">{{firstTable.priceNoTax}}</div>
                            <div class="table-content-item" :title="firstTable.totalMoney" style="padding:0 2px;width:86px;word-wrap: break-word;text-align:right;line-height:22px;display:inline-block;font-size:12px;">{{firstTable.totalNoTax}}</div>
                            <div class="table-content-item" :title="firstTable.taxRate" style="padding:0;width:36px;word-wrap: break-word;text-align:center;line-height:22px;display:inline-block;font-size:12px;">{{firstTable.taxRate}}%</div>
                            <div class="table-content-item" :title="firstTable.storeAddress" style="padding:0 2px;min-width:66px;word-wrap: break-word;text-align:center;line-height:22px;display:inline-block; max-width: 120px; font-size:12px;height: 22px;overflow: hidden; vertical-align: top;">{{firstTable.storeAddress}} </div><!---->
                        </div>
                        <div style="margin:0;padding:0;list-style: none;">
                            <div class="table-content-item top20" style="width:20%;box-sizing:border-box;word-wrap: break-word;text-align:left;line-height:22px;display:inline-block;font-size:12px;">{{seePOForm.expectTime}}</div>
                            <div class="table-content-item top20" :title="firstTable.materialName" style="padding-left:22px;width:78%;box-sizing:border-box;word-wrap: break-word;text-align:left;line-height:22px;display:inline-block;font-size:12px;">{{firstTable.materialName}}</div>

                        </div>
                    </div>
                </div>
                <div style="width: 100%;height: 42px;font-size: 12px;position: relative;font-size:0px;padding-top: 10px;" class="net-worth">
                    <div style="height: 42px;width: 50%;display: inline-block;">
                    </div>
                    <div style="height: 42px;width: 50%;display: inline-block;">
                        <div style="position: absolute;right: 0px;color:black;">
                            <span style="font-size:12px;">Total Amt:</span><span style="height: 40px; line-height: 40px;text-align: center;display: inline-block;width: 200px;border-top: 1px solid #000;border-bottom: 1px solid #000;font-size:12px;">{{seePOForm.totalMoney}}</span>
                        </div>
                    </div>
                </div>
                <div style="width: 100%;margin-top: 10px;margin-bottom: 10px;">
                    <div style="color:#000;"><span style="font-size: 12px;">Remarks:</span><span style="color:#000;font-size: 12px;min-height:100px;display: inline-block;vertical-align: top;margin-bottom: 10px;"></span></div>
                </div>
                <div >
                    <div class="message-box" style="font-size: 0px;color:#000;">
                        <div class="s-box" style="width:40%;margin-right:10%;display:inline-block;">
                            <div style=" padding: 0;  padding-bottom: 40px;border-bottom: 1px solid #000;font-size:12px;">Confirmed and accepted by</div>
                            <div style="margin: 0; padding: 0;padding-top: 10px;font-size: 12px;">Stamp or Authorized Signature(S)</div>
                        </div>
                        <div class="s-box" style="width:40%;margin-left:10%;display:inline-block;">
                            <div style="padding: 0; padding-bottom: 40px;border-bottom: 1px solid #000;font-size:12px;">For and on behalf of Lenovo(Beijing) Limited</div>
                            <div style="margin: 0; padding: 0;padding-top: 10px;font-size: 12px;">Authorized Signature(S)</div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // 查询表单
                seePOForm:{
                    id: "",
                    prOrderCode: "",
                    createTime: "",
                    expectTime: "",
                    contacts: "",
                    telephone: "",
                    amount: "",
                    totalMoney: "",
                    storeRoomCode: "",
                    currency: "",
                    creatorName: "",
                    partnerCode: "",
                    partnerName: ""
                },
                procurementDetailsData:[],
                pages: 0, //除第一页的页数
                allPages: 0 ,  //总页数

            };
        },
        //进入页面立即运行此方法
        mounted: function () {
            var _this = this;
            _this.seePOForm.prOrderCode=_this.$route.query.prOrderCode;
            _this.seePODetails();  //进入页面直接 查看PO详情

        },
        computed:{
            absUrl(){
                return window.location.href.substr(0,window.location.href.indexOf("?"));
            }
        },
        methods: {
            seePODetails(){   //查看PO详情
                var _this =this;
                $.ajax({
                    url:procurement_service+'procurementOrder/view?prOrderCode='+_this.seePOForm.prOrderCode,
                    type:'POST',
                    cache:false,
                    // data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType:'application/json;charset=utf-8',
                    success:function(data){
                        if(data.success){
                            _this.seePOForm=data.data.procurementOrderBasic;

                            if(_this.seePOForm.totalMoney!=null){
                                _this.seePOForm.totalMoney = _this.seePOForm.totalMoney.toFixed(2);   //采购含税总金额保留两位小数totalMoneyNoTax
                            }
                            if(_this.seePOForm.totalMoneyNoTax!=null){
                                _this.seePOForm.totalMoneyNoTax = _this.seePOForm.totalMoneyNoTax.toFixed(2);   //采购不含税总金额保留两位小数
                            }
                            if(_this.seePOForm.currencyTotalMoney!=null){
                                _this.seePOForm.currencyTotalMoney = _this.seePOForm.currencyTotalMoney.toFixed(2);   //本币含税总金额保留两位小数
                            }
                            if(_this.seePOForm.currencyTotalMoneyNoTax!=null){
                                _this.seePOForm.currencyTotalMoneyNoTax = _this.seePOForm.currencyTotalMoneyNoTax.toFixed(2);   //本币不含税总金额保留两位小数
                            }
                            _this.seePOForm.poLegalPersonCode = data.data.procurementOrderBasic.legalPersonCode;
                            _this.seePOForm.poLegalPersonName = data.data.procurementOrderBasic.legalPersonName;
                            var arr=data.data.procurementOrderItems;
                            //单价保留八位小数，总金额保留两位
                            for(var i=0;i<arr.length;i++){
                                arr[i].priceWithTax=arr[i].priceWithTax.toFixed(2);
                                arr[i].priceNoTax=arr[i].priceNoTax.toFixed(2);
                                arr[i].totalNoTax=arr[i].totalNoTax.toFixed(2);
                                arr[i].tax=arr[i].tax.toFixed(2);
                                arr[i].totalMoney=arr[i].totalMoney.toFixed(2);
                            }
                            _this.procurementDetailsData=arr;
                            setTimeout(function(){
                                _this.addTableHead();
                            },0);
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            // 生成pdf
            createPdf(){
                let newWindow = window.open("_blank");   //打开新窗口
                let codestr = document.getElementById("pdf-wrap").innerHTML;   //获取需要生成pdf页面的div代码
                newWindow.document.write('<html><head><title>取自ECC的订单编号(等数据)</title>');
                newWindow.document.write('</head><body style="padding: 0px;margin: 0px;">');
                newWindow.document.write(codestr);   //向文档写入HTML表达式或者JavaScript代码
                newWindow.document.write('<script>window.onload=function(){document.getElementById("content").style.fontFamily="微软雅黑,Helvetica,times new roman";}<\/script>')
                newWindow.document.write('</body></html>');
                newWindow.document.close();     //关闭document的输出流, 显示选定的数据
                newWindow.focus();
                newWindow.print();   //打印当前窗口
                newWindow.close();
                return true;
            },
            // 分页并且添加表头
            addTableHead(){
                var _this = this;
                var contentLength=_this.procurementDetailsData.length;
                var pageTemplate = '<div class="pageBreak" style="page-break-after: always;"></div>' +
                    '<div class="table-head" style="padding:0;margin:0;border-top:1px solid #000;border-bottom:1px solid #000;list-style: none;font-size:12px;">' +
                    '<ul style="margin:0;padding:0;list-style: none;">' +
                    '<li class="table-head-item" style="width:36px;word-wrap: break-word;text-align:left;line-height:26px;display:inline-block;">Item</li>' +
                    '<li class="table-head-item marginleft20" style="margin-left:24px;padding:0 2px;width:138px;word-wrap: break-word;text-align:left;line-height:26px;display:inline-block;">Material</li>' +
                    '<li class="table-head-item" style="padding:0 8px;width:66px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">Quanitity</li>' +
                    '<li class="table-head-item" style="padding:0 8px;width:36px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">Uom</li>' +

                    '<li class="table-head-item" style="padding:0 0 0 2px;width:86px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">Unit price/Per</li>' +
                    '<li class="table-head-item" style="padding:0 0 0 8px;width:86px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">Amount</li>' +
                    '<li class="table-head-item" style="padding:0;width:36px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">Tax</li>' +
                    '<li class="table-head-item" style="padding:0 8px;width:66px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">Loc</li>' +
                    '</ul>' +
                    '<ul style="margin:0;padding:0;list-style: none;">' +
                    '<li class="table-head-item top20" style="width:20%;box-sizing:border-box;                word-wrap: break-word;text-align:left;line-height:26px;display:inline-block;">Delivery date</li>' +
                    '<li class="table-head-item top20" style="padding-left:22px;width:78%;box-sizing:border-box;                word-wrap: break-word;text-align:left;line-height:26px;display:inline-block;">Description</li>' +
                    '</ul>' +
                    '</div>';
                // 第一页显示13条
                var markPageCount=3;
                var markPageCount2=15;
                var firstPageCount = 8;
                var perPageCount = 19;
                if(contentLength > firstPageCount){
                    var ysLastLen=(contentLength - firstPageCount)%perPageCount;
                    if(ysLastLen==0){
                        _this.pages = Math.round(( contentLength - firstPageCount) / perPageCount);
                    }else{
                        _this.pages = Math.round(( contentLength - firstPageCount) / perPageCount) + 1;
                    }
                    var lastTableContentId;
                    for (var i = 0; i < _this.pages; i++) {
                        lastTableContentId = (firstPageCount - 1) + perPageCount * i;
                        $("#table-content" + lastTableContentId).after(pageTemplate);
                    }
                    if(contentLength>(markPageCount2+perPageCount*(_this.pages-2)+firstPageCount)&&contentLength <((perPageCount*(_this.pages-1)+firstPageCount))){
                        $(".net-worth").after('<div class="pageBreak" style="page-break-after: always;"></div>');
                    }
                }else {
                    if (contentLength > markPageCount&&contentLength !=firstPageCount) {
                        $(".net-worth").after('<div class="pageBreak" style="page-break-after: always;"></div>');
                    }
                }
                if(contentLength%firstPageCount==0||(contentLength-firstPageCount)%perPageCount==0){
                    //正好时不需添加表头 所以会再加1
                    _this.allPages=$(".pageBreak").length+2;
                }else{
                    _this.allPages=$(".pageBreak").length+1;
                }

                console.log($(".pageBreak").length+"===="+_this.allPages);


                // 添加分页的页码
                // console.log("_this.allPages===="+_this.allPages)
                for(var i=0;i<_this.allPages;i++){
                    $("#pdf-wrap").append('<div class="page-code" style="position:absolute;top:'+ (1030 + 1045 * i)+'px;right:8px;font-size:12px;"><span>'+ (i+1) +'</span>/<span>'+_this.allPages+'</span></div>');
                }



            },
            // 返回按钮
            backSeePO(){
                var _this=this;
                _this.$router.push({path:"/SeePO",query:{prOrderCode:_this.seePOForm.prOrderCode}});
            },
            formatDate(date){
//                输入模式 2017-08-18 13:33:53
                var timeDate=date.split(" ")[0];
                var temp=timeDate.split("-");
                return [temp[1],temp[2],temp[0]].join("/")
            },
            // // ===================================
            // successTip(p) {     //成功时的提示信息
            //     this.$notify({
            //         title: '成功',
            //         message: p,
            //         type: 'success'
            //     });
            // },
            // errorTip(p) {     //错误提示
            //     this.$notify.error({
            //         title: '错误',
            //         message: p
            //     });
            // }

        }
    }
</script>